<template>
	<view class="page">
		<view class="numCar">
			<navigator url="/pages/user/wallet/withdrawal">
				<image class="qtx" src="../../../static/qtx.png" mode=""></image>
			</navigator>
			<view class="num">
				1000
			</view>
			<view class="title">
				余额
			</view>
		</view>
		<view class="selAll">
			<view class="title">
				收支明细
			</view>
			<view class="FX1"></view>
			<view class="sel">
				<text>类型</text>
				<text class="icon"></text>
			</view>
			<view class="sel">
				<text>日期选择</text>
				<text class="icon"></text>
			</view>
		</view>
		
		<view class="numList">
			<view class="box">
				<view class="head">
					<view class="yuan"></view>
					<view class="state">完成学习</view>
					<view class="FX1"></view>
					<view class="num" style="color: #FC1BAA;">+100</view>
				</view>
				<view class="date">
					2024年4月20日 12:44
				</view>
			</view>
			<view class="box">
				<view class="head">
					<view class="yuan"></view>
					<view class="state">完成学习</view>
					<view class="FX1"></view>
					<view class="num" style="color: #46DC9E;">-100</view>
				</view>
				<view class="date">
					2024年4月20日 12:44
				</view>
			</view>
		</view>
	</view>

</template>

<script>
</script>
<style>
	page {
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.page {
		padding:32rpx 20rpx;
	}

	.numCar {
		width: 710rpx;
		height: 250rpx;
		background-image: url('../../../static/qbbg.png');
		background-size: 100% 100%;
		position: relative;
		.qtx{
			width: 150rpx;
			height: 60rpx;
			position: absolute;
			right: 0;
			top: 95rpx;
		}
		.title {
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			padding-left: 60rpx;
		}

		.num {
			font-weight: bold;
			font-size: 72rpx;
			color: #FFFFFF;
			padding-left: 60rpx;
			padding-top: 80rpx;
			line-height: 53rpx;
			margin-bottom: 23rpx;
		}
	}
	.selAll{
		display: flex;
		align-items: center;
		margin-top: 60rpx;
		.title{
			font-weight: bold;
			font-size: 30rpx;
		}
		.sel {
			min-width: 180rpx;
			text-align: center;
			height: 45rpx;
			line-height: 45rpx;
			background: #F2F2F2;
			border-radius: 22rpx;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: center;
			// padding: 0 30rpx;
			margin-left: 30rpx;
			.icon {
				width: 0;
				height: 0;
				border-left: 12rpx solid transparent;
				border-right: 12rpx solid transparent;
				border-top: 18rpx solid #999999;
				margin-left: 20rpx;
			}
		}
		
	}
	
	.numList{
		margin-top: 37rpx;
		.box{
			border-top: 1rpx solid #CCCCCC;
			padding: 40rpx 24rpx 45rpx 14rpx;
			.head{
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				.yuan{
					width: 10rpx;
					height: 10rpx;
					background: #0F4BCB;
					border-radius: 50%;
				}
				.state{
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					line-height: 50rpx;
					margin-left: 20rpx;
				}
			}
			.date{
				font-weight: 300;
				font-size: 24rpx;
				color: #999999;
				margin-left: 30rpx;
			}
			
		}
	}
</style>